<template>
  <div class="form-container">
    <div class="filter-item-top">
      <span>商品名称:{{ historyList[0].goodsName }}</span>
      <span
        >商品编号:{{ historyList[0].goodsId
        }}<el-button link type="primary" size="small" :icon="DocumentCopy" v-copy="historyList[0].goodsId"></el-button
      ></span>
    </div>
  </div>
  <div class="form-container">
    <el-form inline :model="historyParams" class="form-line" label-width="70">
      <el-form-item label="所属驿站" prop="labelScope">
        <el-select size="default" v-model="historyParams.stageId" @change="getHistoryList" placeholder="请选择所属驿站">
          <el-option v-for="item in siteList" :key="item.id" :label="item.name" :value="item.id as string"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
  <div class="table-container">
    <el-table
      border
      :cell-style="{ textAlign: 'center', fontSize: '13px' }"
      :header-cell-style="{
        textAlign: 'center',
        fontWeight: '100',
        fontSize: '13px',
        color: 'white',
        backgroundColor: '#009688'
      }"
      :data="historyList"
      style="width: 100%"
    >
      <el-table-column prop="name" label="所属驿站" />
      <el-table-column prop="specsName" label="商品规格" />
      <el-table-column prop="way" label="出入库">
        <template #default="scope">
          <span v-if="scope.row.way == 1">出库</span>
          <span v-else-if="scope.row.way == 2">入库</span>
        </template>
      </el-table-column>
      <el-table-column prop="currentNum" label="出入库前数量" />
      <el-table-column prop="source" label="来源">
        <template #default="scope">
          <span v-if="scope.row.source == '1'">销售出库</span>
          <span v-else-if="scope.row.source == '2'">扫码入库</span>
          <span v-else-if="scope.row.source == '3'">退货入库</span>
          <span v-else-if="scope.row.source == '4'">盘盈</span>
          <span v-else-if="scope.row.source == '5'">盘亏</span>
          <span v-else>盘库相符</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="出入库时间" />
      <el-table-column prop="orderId" label="来源编号">
        <template #default="scope">
          <span
            >{{ scope.row.orderId
            }}<el-button link type="primary" size="small" v-copy="scope.row.orderId" :icon="DocumentCopy"></el-button
          ></span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        size="small"
        v-model:current-page="historyParams.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        layout="prev, pager, next"
        :total="50"
        :page-size="historyParams.pageSize"
      />
    </div>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { Inventory } from "@/api/interface/province/inventory";
import { getInventoryHistoryAPI } from "@/api/modules/province/inventoryAPI";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { DocumentCopy } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import { Site } from "@/api/interface/province/organizationManage";
import { getSiteListAPI } from "@/api/modules/province/organizMangeAPI";
const route = useRoute();
const historyList = ref<Inventory.HistoryData[]>([
  {
    id: 1,
    source: "st",
    way: -2147483648,
    num: -2147483648,
    goodsId: "string",
    goodsName: "string",
    orderId: "string",
    inventoryId: -2147483648,
    stageId: -2147483648,
    specsId: -2147483648,
    specsName: "string",
    originNum: -2147483648,
    currentNum: -2147483648,
    createTime: "2019-08-24T14:15:22.123Z",
    createBy: "string"
  },
  {
    id: 1,
    source: "st",
    way: -2147483648,
    num: -2147483648,
    goodsId: "string",
    goodsName: "string",
    orderId: "string",
    inventoryId: -2147483648,
    stageId: -2147483648,
    specsId: -2147483648,
    specsName: "string",
    originNum: -2147483648,
    currentNum: -2147483648,
    createTime: "2019-08-24T14:15:22.123Z",
    createBy: "string"
  },
  {
    id: 1,
    source: "st",
    way: -2147483648,
    num: -2147483648,
    goodsId: "string",
    goodsName: "string",
    orderId: "string",
    inventoryId: -2147483648,
    stageId: -2147483648,
    specsId: -2147483648,
    specsName: "string",
    originNum: -2147483648,
    currentNum: -2147483648,
    createTime: "2019-08-24T14:15:22.123Z",
    createBy: "string"
  }
]);
const historyParams = ref<Inventory.HistoryParams>({
  specsId: Number(route.query.specsId),
  goodsId: route.query.goodsId as string,
  pageNum: 1,
  pageSize: 10
});
const getHistoryList = async (data: Inventory.HistoryParams) => {
  const { rows, code, msg } = await getInventoryHistoryAPI(data);
  if (code == "200" && rows) {
    historyList.value = rows;
  } else {
    ElMessage.error(msg);
  }
};
let siteList = ref<Site.SiteList[]>([]);
const getSiteList = async () => {
  const { rows, total, code, msg } = await getSiteListAPI({
    name: "",
    code: "",
    userId: JSON.parse(localStorage.getItem("userInfo") as string)?.userId,
    pageNum: 1,
    pageSize: 10
  });
  console.log(total, code);
  if (code == "200" && rows) {
    siteList.value = rows;
  } else {
    ElMessage.error(`获取列表失败,${msg}`);
  }
};
onMounted(() => {
  getSiteList();
  getHistoryList(historyParams.value);
});
</script>
<style lang="scss" scoped>
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
::v-deep .el-select_wapper {
  font-size: 13px;
}
::v-deep .el-select__placeholder.is-transpar {
  font-size: 13px;
}
.form-container {
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
  .btn-container {
    display: inline-block;
    float: right;
    vertical-align: middle;
  }
  .el-form {
    display: inline-block;
  }
  .form-line {
    .el-form-item {
      margin: 0;
      margin-right: 20px;
    }
    .el-input {
      width: 240px;
    }
    .el-select {
      width: 240px;
    }
  }
  .filter-item-top {
    padding: 10px;
    span {
      display: inline-block;
      margin-right: 20px;
      font-size: 13px;
      color: gray;
    }
  }
}
.table-container {
  padding: 40px 10px;
  padding-bottom: 60px;
  background-color: white;
  .pagination-container {
    // display: inline-block;
    float: right;
    margin-top: 20px;
    background-color: white;
  }
}
</style>
